<script src="../router/index.js"></script>
<template>
  <div id="lineMap">
    <el-row>

      <!--地图部分 -->
      <el-col :span="24">
        <div class = "line_index">
          <div class="tab-item" @click="changeLine(index)" v-for="(item, index) in nav">
            <div :class="line_ind === index ? 'line_name line_ing2' : 'line_name line_ing1'">{{item.title}}</div>
          </div>
        </div>
        <div class = "line_index2">
          <div v-for="(item, index) in nav2">
            <div  :class = "item.cla"></div>
            <div class = "park_use">{{item.name}}</div>
          </div>
          <div class = "taxi_line">
            <div v-for="(item, index) in nav1">
              <div  :class = "item.cla"></div>
              <div class = taxi_line_name>{{item.name}}</div>
            </div>
          </div>
        </div>
        <div id="allmaps"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { TMap } from '../TMap';
  import 'font-awesome/css/font-awesome.min.css';
  import {parks,venue} from '../../static/js/map/parking.js';
  import {vipParking} from '../../static/js/map/lineParking.js';
  import {vip_line,bus_line,taxi_line,make_line,line_direction} from '../../static/js/map/line2.js';
  import left from '../../static/img/left.png';
  import left1 from '../../static/img/left1.png';
  import layout from './layout/Layout';
  import jq from 'jquery';
  var echarts = require('echarts');
  export default {
    name:"lineMap",
    components: {

    },
    data(){
      return{
        nav: [
          {title: '嘉宾与保障线路',index:0},
          {title: '公共交通线路',index:1},
          {title: '出租车进出线路',index:2},
          {title: '社会预约车辆线路',index:3}
        ],
        nav1: [
          {name: '出租车驶入路线',pro:45,cla:'it_color1'},
          {name: '出租车使出路线',pro:67,cla:'it_color2'}
        ],
        nav2: [
          {name: '嘉宾车停车场',color:'#F1AACA',cla:'par_color1 par_color'},
          {name: '贵宾车停车场',color:'#7F509E',cla:'par_color2 par_color'},
          {name: '展商车辆停车场',color:'#07B0CF',cla:'par_color3 par_color'},
          {name: '公安执勤车辆停车场',color:'#9EC7EC',cla:'par_color4 par_color'},
          {name: '出租车蓄车区',color:'#A4CF73',cla:'par_color5 par_color'},
          {name: '定线巴士停靠区',color:'#F5C82F',cla:'par_color6 par_color'},
          {name: '定线巴士蓄车场',color:'#52B77D',cla:'par_color7 par_color'},
          {name: '出租蓄车区与贵宾巴士停靠区',color:'#B0D47D',cla:'par_color8 par_color'},
          {name: '区县包车停靠区',color:'#52B77B',cla:'par_color9 par_color'}
        ],
        whell:true,
        count:20000,
        line_ind:0,
        peoCurAbout:"30",
        peoPlanAbout:"25",
        carCurAbout:"6000",
        carPlanAbout:"5000",
        totalCar:"5000",
        surplusCar:"800",
        totalRate:"82%",
        visible:false,
        line:[]

      }
    },
    mounted () {
      //this.whell = layout.data().whell
      this.map(0);
      this.threeGo();
      for(var m = 0;m < this.nav2.length; m++) {
        var cls = '.par_color'+(m+1)
        jq(cls).css('background-color',this.nav2[m].color)
      }
    },
    methods: {
      changeLine(a){
        this.count = 20000;
        this.line_ind = a
        jq('.taxi_line').css('display','none')
        if(a == 2){
          jq('.taxi_line').css('display','block')
        }
        jq('.line_ing').css('display','none')
        this.map(a);
      },
      threeGo() {
        setInterval(()=>{
          if(this.whell) {
            var s = this.line_ind;
            if(this.line_ind<this.nav.length-1) {
              s = s + 1
            }else{
              s = 0
            }
            this.changeLine(s)
          }
        },this.count)
      },

      //地图添加折线
      addLine(map,lines,typ){
        if(this.line.length>0){
          for(var m = 0;m < this.line.length; m++) {
            this.line[m].setMap(null);
          }
        }
        var da = [];
        for(var i = 0;i < lines.length; i++) {
          (function(v){
            var pl = [];
            for(var l = 0;l < lines[v].path.length; l++) {
              pl.push(new qq.maps.LatLng(lines[v].path[l][0],lines[v].path[l][1]))
            }
            var col = '#fff700'
            if(lines[v].type == 'tax2'){
              col = '#00ffbc'
            }
            var polyline = new qq.maps.Polyline({
              path: pl,
              strokeColor: col,
              strokeWeight: 3,
              strokeDashStyle:"dash",
              zIndex: 1000,
              editable:false,
              map: map
            });
            da.push(polyline)
          })(i);
        }

        var das = line_direction()
        var po = das[typ]
          var url = left
          for(var j = 0;j < po.length; j++) {
            if(po[j].typ == 1){
              url = left1
            }
            var ce = new qq.maps.LatLng(po[j].pot[0], po[j].pot[1]);
            var la = new qq.maps.Label({
              position: ce,
              map: map,
              content: '<div class = "line_ing" style="height: 2vh;width:4vh;margin-top: '+po[j].margin_top+'%;margin-left: '+po[j].margin_left+'%;background-image: url(' + url + ');background-repeat: no-repeat;background-size: 100%;transform:rotate('+po[j].angle+'deg);"></div>'
            });
          }
        return da;
      },
      //在地图添加多边形覆盖物
      addOutline(map,data){
        //国博馆轮廓
        for (var n = 0; n < data.length; n++) {
          var ph = []
          for (var k = 0; k < data[n].path.length; k++) {
            ph.push(new qq.maps.LatLng(data[n].path[k][0], data[n].path[k][1]))
          }
          var bw = 0
          if(data[n].name == '重庆国际<br/>博览中心'){
            bw = 1
          }
          var polygon2 = new qq.maps.Polygon({
            map: map,
            path: ph,
            strokeWeight: bw,
            strokeDashStyle: 'dash',
            strokeColor: '#a2ecfb',
            fillColor: qq.maps.Color.fromHex(data[n].color, data[n].transparent)
          });
          if(data[n].showName){
            var ce = new qq.maps.LatLng(data[n].center[0],data[n].center[1]);
            var la = new qq.maps.Label({
              position: ce,
              map: map,
              content: '<div class = "tit" style="height: 12px;width:12px;margin-top: -67%;margin-left: -63%;">'+data[n].name+'</div>'
            });
          }
        }
      },
      map(t){
        var dat = [vip_line(),bus_line(),taxi_line(),make_line()]
        var p = parks();
        var lines = dat[t];
        TMap().then(qq => {
          var map = new qq.maps.Map(document.getElementById("allmaps"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(29.717986,106.543071),
            zoom: 15,
            mapStyleId: 'style1',
            //disableDefaultUI: true,    //禁止所有控件
          });
          this.line = this.addLine(map,lines,t)
          this.addOutline(map,venue());
          this.addOutline(map,vipParking());
          //当缩放级别小于15 隐藏文字
          qq.maps.event.addListener(map,'zoom_changed',function() {
            var zoomLevel = map.getZoom();
            var si = {"f15":1.5,"f16":1.8,"f17":2.3,"f18":3.8}
            //jq('.tit').css('font-size',si['f'+zoomLevel]+'vh')
            if(zoomLevel>14){
              jq('.tit').css('display','block')
            }else{
              jq('.tit').css('display','none')
            }
            var h = '2vh';
            var w = '4vh';
            if(zoomLevel == 14){
              jq('.tit').css('font-size','0.5vw')
               h = '1.5vh'
               w = '3vh'
            }else if(zoomLevel == 15){
              jq('.tit').css('font-size','0.7vw')
              h = '2vh'
              w = '4vh'
            }else if(zoomLevel == 16){
              jq('.tit').css('font-size','0.8vw')
              h = '2.5vh'
              w = '5vh'
            }else if(zoomLevel == 17){
              jq('.tit').css('font-size','0.9vw')
              h = '3vh'
              w = '6vh'
            }else if(zoomLevel == 18){
              jq('.tit').css('font-size','1.1vw')
              h = '4vh'
              w = '8vh'
            }
            jq('.line_ing').css('width',w)
            jq('.line_ing').css('height',h)
            if(zoomLevel>13){
              jq('.line_ing').css('display','block')
            }else{
              jq('.line_ing').css('display','none')
            }
          });

          //实时路况图层
          var layer = new qq.maps.TrafficLayer();
          layer.setMap(map);
        });

        jq(function(){
          jq("#allmaps").bind("DOMNodeInserted",function(e){
            var tempCount = 0;
            jq("#allmaps .smnoprint").siblings().each(function(){
              tempCount++;
              if(tempCount==2||tempCount==3){
                jq(this).remove();
              }
            });
          });
        });
      }
    },
  }
</script>
<style lang="scss" scoped>
  #lineMap{
    width: 100%;
    height: 100vh;
    *{margin: 0;padding: 0;}

    #allmaps{
      height: 100vh;
      overflow: hidden;
    }

    .taxi_line{
      display: none;
    }
    .it_color1{
      height: 0.5vh;
      width: 2vw;
      float: left;
      margin-top: 2.25vh;
      margin-left: 0.7vw;
      border-top: 3px dashed #fff700;
    }
    .it_color2{
      height: 0.5vh;
      width: 2vw;
      float: left;
      margin-top: 2.25vh;
      margin-left: 0.7vw;
      border-top: 3px dashed  #00ffbc;
    }
    .taxi_line_name{
      color: #fff;
      font-size: 0.7vw;
      width: 50%;
      line-height: 5vh;
      margin-left: 3.5vw;
    }
    .line_index{
      position: absolute;
      left: 2vh;
      top: 10vh;
      width: 35%;
      z-index: 10000;
    }
    .line_index2{
      position: absolute;
      left: 1vw;
      top: 16vh;
      width: 13.3vw;
      background-color: rgba(89,93,100,0.5);
      z-index: 10000;
    }

    .par_color{
      height: 2vh;
      width: 1.5vw;
      float: left;
      margin-top: 1.5vh;
      margin-left: 1vw;
      background-color:  #F1AACA;
    }
    .park_use{
      color: #fff;
      font-size: 0.7vw;
      width: 76%;
      line-height: 5vh;
      margin-left: 3.5vw;
    }

    .line_name{
      color: #fff;
      width: 24%;
      float: left;
      font-size: 0.8vw;
      line-height: 5vh;
      text-align: center;
      cursor:pointer;
    }
    .line_ing1{
      background: url("../../static/img/hoverbefore.png") no-repeat;
      background-size: 100% 100%;
    }
    .line_ing2{
      background: url("../../static/img/hoverafter.png") no-repeat;
      background-size: 100% 100%;
      font-size: 0.9vw;
    }
    .line_name:hover{
      background: url("../../static/img/hoverafter.png") no-repeat;
      background-size: 100% 100%;
      font-size: 0.9vw;
    }
  }
</style>
